import styles from './index.module.scss';
import ArticleList from './components/ArticleList';
import ArticleMark from './components/ArticleMark';
import { useAppSelector } from '@/store';
import { Channels } from './components/Channels/index';

export default function Home() {
  const { userChannels, activeId } = useAppSelector((state) => state.channel);
  return (
    <div className={styles.root}>
      {/* 首页频道组件 */}
      <Channels />
      {/* 首页新闻列表组件 */}
      {userChannels.map((item) => (
        <div
          key={item.id}
          className="channel-list"
          // 显示对应id的文章，再切回去，滚动条位置不变，原理就是隐藏其他的list，只显示id对上的文章，在切换时候就相当于切换别的list
          hidden={activeId !== item.id}
        >
          <ArticleList channel_id={item.id} />
        </div>
      ))}
      {/* 标记文章的组件 - 不感兴趣 举报 */}
      <ArticleMark />
    </div>
  );
}
